<template>
  <view class="mxp-page-loading" :style="[cusStyle, { height: pageHeight, width: pageWidth }]" :class="cusClass">
    <text
      v-for="(item, index) in textList"
      :key="index"
      class="loading-text vue"
      :style="{ animationDuration: `${400 * 2}ms`, animationDelay: `${(400 / 2) * index}ms`, fontSize, color: color || defThemeColor.icon }"
    >
      {{ item }}
    </text>
  </view>
</template>

<script lang="ts" setup>
  import { publicStyeProps } from '../mxp-tool/utils/public-props';
  import { type PropType, computed } from 'vue';
  import type { $AllColorStr, $SizeUnitStr } from '../mxp-tool/types/interface';
  import mxpGetSysInfoStore from '../mxp-tool/store/mxp-store-sys-info';
  import { defThemeColor } from '../mxp-tool/theme/theme';
  defineOptions({
    name: 'mxp-page-result',
  });

  const props = defineProps({
    /**高度 */
    height: { type: String, default: undefined },
    /** 宽度 */
    width: { type: String, default: '100vw' },
    /** 加载中文字 */
    text: { type: String, default: '加载中...' },
    /** 加载中文字大小 */
    fontSize: { type: String as PropType<$SizeUnitStr>, default: '38px' },
    /** 中文字颜色 */
    color: { type: String as PropType<$AllColorStr>, default: undefined },
    ...publicStyeProps,
  });

  const sys = mxpGetSysInfoStore().getSysInfo();
  const pageWidth = computed(() => props.width || `${sys.value.windowWidth}px`);
  const pageHeight = computed(() => props.height || `${sys.value.windowHeight - 60}px`);

  const textList = computed(() => {
    let list: string[] = [];
    list = props.text.split('');
    return list;
  });
</script>

<style lang="scss" scoped>
  @keyframes twinkle {
    0% {
      opacity: 0.3;
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: 0.3;
    }
  }

  .mxp-page-loading {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .loading-text {
    font-weight: bold;
    color: #c2c1c2;
    opacity: 0.3;
    animation-name: twinkle;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
</style>
